<template>
  <div ref="WebGL"></div>
</template>

<script>
import * as T from 'three'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted(){
    const WebGL=this.$refs.WebGL;
    const scene= new T.Scene();
    const camera=new T.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    const renderer=new T.WebGLRenderer();
    // renderer.bg;
    renderer.setSize(window.innerWidth,window.innerHeight);

    const axes=new T.AxisHelper(20);
    scene.add(axes);

    const planeGeometry = new T.PlaneGeometry(60,20,1,1);
    const planeMaterial = new T.MeshBasicMaterial({color:0xcccccc});
    const plane = new T.Mesh(planeGeometry,planeMaterial);

    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 15;
    plane.position.y=0;
    plane.position.z=0;

    scene.add(plane);

    const cubeGeometry=new T.BoxGeometry(4,4,4);
    const cubeMaterial =new T.MeshBasicMaterial({color:0xff0000,wireframe:true});
    const cube=new T.Mesh(cubeGeometry,cubeMaterial);

    cube.position.x=-4;
    cube.position.y=3;
    cube.position.z=0;

    scene.add(cube);

    const sphereGeometry = new T.SphereGeometry(4,20,20);
    const sphereMaterial = new T.MeshBasicMaterial({color:0x7777ff,wireframe:true});
    const sphere=new T.Mesh(sphereGeometry,sphereMaterial);

    sphere.position.x=20;
    sphere.position.y=4;
    sphere.position.z=2;

    scene.add(sphere);

    camera.position.x=-30;
    camera.position.y=40;
    camera.position.z=30;
    camera.lookAt(scene.position);

    WebGL.appendChild(renderer.domElement);
    renderer.render(scene,camera);

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
